<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UserOrder</title>
  <script src="../static/static/vue.min.js"></script>
  <script src="../static/static/axios.min.js"></script>
  <!--本地引入lib-master-->
  <link rel="stylesheet" type="text/css" href="../static/lib-master/theme-chalk/index.css" />
  <script src="../static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
  <script src="../static/js/jquery-1.8.2.min.js"></script>
</head>

<body>
<div id="app">
  <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
    <el-form-item>
      <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="getDataList()">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="dataList" border style="width: 100%;">
    <!--<el-table-column prop="rentId" header-align="center" align="center" label="租房id">
    </el-table-column>
    <el-table-column prop="userPhone" header-align="center" align="center" label="用户手机号">
    </el-table-column>
    <el-table-column prop="userPhone" header-align="center" align="center" label="用户id">
    </el-table-column>-->
    <el-table-column prop="houseImg" header-align="center" align="center" label="房屋图片">
      <template slot-scope="scope">
        <img :src="scope.row.houseImg" alt="" width="150px" height="100px">
      </template>
    </el-table-column>
    <el-table-column prop="leaseTrem" header-align="center" align="center" label="租期">
    </el-table-column>
    <el-table-column prop="housePrice" header-align="center" align="center" label="租赁价格">
    </el-table-column>
    <el-table-column prop="createTime" header-align="center" align="center" label="订单创建时间">
    </el-table-column>
    <el-table-column prop="orderPrice" header-align="center" align="center" label="支付价格">
    </el-table-column>
    <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态">
      <!--[1、待支付 2、租赁成功 3、订单超时 4、房源失效]-->
      <template slot-scope="scope">
        <span v-if="scope.row.orderStatus == 1">待支付</span>
        <span v-if="scope.row.orderStatus == 2">租赁成功</span>
        <span v-if="scope.row.orderStatus == 3">订单超时</span>
        <span v-if="scope.row.orderStatus == 4">房源失效</span>
      </template>
    </el-table-column>
    <el-table-column prop="payTime" header-align="center" align="center" label="支付时间">
    </el-table-column>
    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="goComment(scope.row)">评价</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                 :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                 layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>

  <!--用户评价-->
  <el-dialog title="房屋评价" :close-on-click-modal="false" :visible.sync="commentVisible">
    <el-form :model="comment" ref="comment" @keyup.enter.native="commentSubmit()" label-width="80px">
      <!--<el-form-item label="用户手机号" prop="userPhone">
        <el-input v-model="comment.userPhone" placeholder="用户手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" prop="userName">
        <el-input v-model="comment.userName" placeholder="用户姓名"></el-input>
      </el-form-item>-->
      <el-form-item label="房源编号" prop="roomId" :hidden="comment.roomId == ''">
        <span style="color: #999999">{{comment.roomId}}</span>
      </el-form-item>
      <el-form-item label="租房编号" prop="rentId" :hidden="comment.rentId == ''">
        <span style="color: #999999; font-weight: bolder">{{comment.rentId}}</span>
      </el-form-item>
      <!--<el-form-item label="评论时间" prop="commentTime">
        <el-input v-model="comment.commentTime" placeholder="评论时间"></el-input>
      </el-form-item>-->
      <el-form-item label="评论内容" prop="content">
        <el-input type="textarea" :rows="5" placeholder="请输入评价内容" v-model="comment.content"></el-input>
      </el-form-item>
      <el-form-item label="房屋评分" prop="userScore">
        <el-rate v-model="comment.userScore"></el-rate>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="commentSubmit()">确定</el-button>
    </span>
  </el-dialog>
</div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        baseUrl: "http://localhost:88/api",
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        /*用戶評價*/
        commentVisible: false,
        comment: {
          commentId: 0,
          userPhone: '',
          userName: '',
          roomId: '',
          rentId: '',
          commentTime: '',
          content: '',
          userScore: ''
        },
      }
    },
    created() {
      axios.defaults.withCredentials = true;
      this.getDataList();
    },
    methods: {
      // 获取数据列表
      getDataList() {
        axios.get(`${this.baseUrl}/order/house-rent-order/findOrderByUser`).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      // 用户评价
      goComment(order) {
        this.commentVisible = true;
        // 初始化
        comment = {
          commentId: 0,
          userPhone: '',
          userName: '',
          roomId: '',
          rentId: '',
          commentTime: '',
          content: '',
          userScore: ''
        }
        // 赋值
        this.comment.rentId = order.rentId;
        this.comment.userPhone = order.userPhone;
      },
      // 评价提交
      commentSubmit () {
        axios.post(`${this.baseUrl}/user/user-comment/save`, this.comment).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '评价成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    },
  })
</script>

</html>
